<template>
    <div id="video">
        <h1>猫眼电影<van-icon name="bars" class="topright"/></h1>
         <div class="content">
            <div class="content-head">
                <ul>
                    <li v-for="v in videolist" :key="v.id">
                        <div class="content-content">
                            <img :src="v.shareInfo.img"  @click="video(v)"/>
                            <div class="content-content-title">
                                <p>{{v.title}}</p>
                            </div>
                            <div class="content-content-img">
                                <img :src="v.user.avatarurl">
                                <span class="user">{{v.user.nickName}}</span>
                                <span class="dianzan"><van-icon name="good-job-o" />{{v.upCount}}</span>
                            </div>
                        </div>

                    </li>
                </ul>

            </div>
    </div>
</div>
</template>

<script>
export default {
    name:'videoview',
    created(){
        this.getVideoList()
        console.log(this.$router)
    },
    data(){
        return {
            videolist:[],
        }
    },
    methods:{
        getVideoList(){
            /* 此处应该pargram传参 video/short/:offset */
            this.axios.get("video/0").then(re =>{
                console.log("video======>",re)
                this.videolist=re.feeds
            })
        },
        video(v){
            this.$router.push({name:'videoplay',params:{vlist:v}})
        }
    }
}
</script>

<style scoped>
*{
    padding: 0;
    margin: 0;
}
#video h1{
    width: 100%;
    text-align: center;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    background-color: rgb(235, 56, 56);
    color: white;
    font-weight: 500;
}
#video .topright{
    position: absolute;
    font-size: 30px;
    right: 0;
    top: 12px;
}
.content-head {
    display: flex;
    justify-content: space-between;
}

.content-head ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    height: 350px;
    /* line-height: 350px; */

}

.content-head ul li {
    width: 49%;
    height: 100%;
    list-style: none;
    background-color: black;
    position: relative;
    border: 1px solid white;
    display: flex;
    align-items: center;
}

.content-head img{
    width: 100%;
    height: auto;
    align-items: center;
    display: inline-block;

}

.content-content-title>p {
    position: absolute;
    bottom: 50px;
    z-index: 100;
    width: auto;
    height: auto;
    line-height: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-align: left;
    color: aliceblue;
    margin-left: 5px;

}

.content-content-img img {
    z-index: 100;
    width: 25px;
    height: 25px;
    position: absolute;
    bottom: 20px;
    left: 10px;
    border-radius: 50%;
}

.content-content-img .user {
    position: absolute;
    left: 40px;
    bottom: 20px;
    color: aliceblue !important;
    width: auto;
    height: 25px;
    line-height: 25px;
}

.content-content-img .dianzan{
    position: absolute;
    right: 10px;
    bottom: 20px;
    color: aliceblue !important;
    width: auto;
    height: 25px;
    line-height: 25px;
}
</style>